<h1 class="screenreader-only">
  {{#t "discussion_topics"}}Discussion Topics{{/t}}
</h1>

{{#ifAll atLeastOnePageFetched length}}
  <div class="headerBar clearfix">
    <div class="pull-left form-inline index_view_filter_form">
      <span id="searchTermDescription" class="screenreader-only">
        {{#t}}As you type in this field, the list of results will be automatically updated.{{/t}}
      </span>
      <label class="screenreader-only" for="searchTerm">
        {{t "Search title, body, or author"}}"
      </label>
      <input id="searchTerm"
             placeholder="{{t "Search title, body, or author"}}"
             aria-describedby="searchTermDescription"
             value="{{searchTerm}}"
             type="search">
      <span id="discussionsFilter">
        <input type="checkbox"
               id="onlyUnread"
               {{#if onlyUnread}}checked{{/if}} />
        <label for="onlyUnread" class="no-button-role">
          <span aria-hidden="true">{{#t "unread"}}Unread{{/t}}</span>
          <span class="screenreader-only">{{t "filter discussions by unread"}}</span>
        </label>
        <input type="checkbox"
               id="onlyGraded"
               {{#if onlyGraded}}checked{{/if}}/>
        <label for="onlyGraded" class="no-button-role">
          <span aria-hidden="true">{{#t "assignments"}}Assignments{{/t}}</span>
          <span class="screenreader-only">{{t "filter discussions by assignments"}}</span>
        </label>
      </span>
      <div id="searchResultCount" aria-live="polite" class="screenreader-only"></div>
    </div>
    <div class="pull-right form-inline">
      {{#if options.atom_feed_url}}
        <a class="btn"
           href="{{options.atom_feed_url}}"
           data-tooltip
           title="{{#t "rss_feed"}}RSS feed{{/t}}">
           <span class="screenreader-only">{{#t "rss_feed"}}RSS feed{{/t}}</span>
           {{> icons/rss}}
        </a>
      {{/if}}
      <span id="actionsForSelectedDiscussions" style="display:none;">
        <input type="checkbox" id="lock" />
        <label for="lock" data-tooltip>{{#t "lock_for_comments"}}Lock for comments{{/t}}</label>
        <button id="delete" data-tooltip>{{#t "delete"}}Delete{{/t}}</button>
      </span>

      {{#if options.permissions.create}}
        <a
          href="{{new_topic_url}}"
          class="btn btn-primary icon-plus"
          id="new-discussion-btn"
          role="button"
          title='{{#t "title_start_a_discussion"}}Start a Discussion{{/t}}'
          aria-label='{{#t "title_start_a_discussion"}}Start a Discussion{{/t}}'
        >{{#t}}Discussion{{/t}}</a>
      {{/if}}

      <button
        id="edit_discussions_settings"
        class="btn"
        data-tooltip="{{#if options.permissions.create}}top{{else}}left{{/if}}"
        title='{{#t "edit_settings"}}Edit Discussions Settings{{/t}}'>
        {{> icons/settings}}
        <span class="screenreader-only">{{#t "edit_settings"}}Edit Discussions Settings{{/t}}</span>
      </button>
    </div>
  </div>

  <div class="nothingMatchedFilter" style="display:none;">
    <p>
      {{#t "your_search_did_not_match_any_discussion_topics"}}Your search did not match any discussion topics.{{/t}}
    </p>
    <p>
    {{#t "suggestions"}}Suggestions:{{/t}}
    <ul>
      <li>{{#t "make_sure_all_search_terms_are_spelled_correctly"}}Make sure all search terms are spelled correctly.{{/t}}</li>
      <li>{{#t "try_different_more_general_or_fewer_keywords"}}Try different, more general, or fewer keywords.{{/t}}</li>
      <li>{{#t "try_disabling_the_unread_or_assignments_filters"}}Try disabling the "Unread" or "Assignments" filters.{{/t}}</li>
    </ul>
  </div>

  <span tabindex="0" class="screenreader-only accessibility-warning">Warning: For improved accessibility in re-ordering a Pinned Discussion, please use the Move To Dialog option found in the menu.</span>

  <div class="discussion-collections">
    <div class="pinned discussion-list item-group"></div>
    <div class="open discussion-list item-group"></div>
    <div class="locked discussion-list item-group"></div>
  </div>

{{else}}

  {{#if lastPageFetched}}
    <div style="margin:auto; text-align: center; margin-top: 80px">
      <h1>
        {{#t "there_are_no_discussion_topics_to_show"}}There are no discussion topics to show{{/t}}
      </h1>
      {{#if options.permissions.create}}
        <a href="{{new_topic_url}}" class="btn btn-large btn-primary">
          {{#t "start_one_now"}}Start One Now{{/t}}
        </a>
      {{/if}}
    </div>
  {{else}}
    <h2>{{#t "loading"}}Loading...{{/t}}</h2>
  {{/if}}
{{/ifAll}}
